<template>
  <div class="student">
    <div class="head">
      <div class="head-left">教师管理</div>
      <div class="head-right">
        <div class="form">
          <el-button icon="el-icon-folder-add" @click="dialogFormVisible = true"
            >添加教师
          </el-button>
          <el-dialog
            title="增加教师"
            v-model="dialogFormVisible"
            style="display: flex"
          >
            <el-form :model="form">
              <el-form-item label="教师名称" style="width: 200px">
                <el-input
                  v-model="form.name"
                  style="width: 200px"
                  autocomplete="off"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="手机号" style="width: 200px">
                <el-input
                  v-model="form.tel"
                  style="width: 200px"
                  autocomplete="off"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="微信号" style="width: 200px">
                <el-input
                  v-model="form.wechat"
                  style="width: 200px"
                  autocomplete="off"
                  clearable
                ></el-input>
              </el-form-item>
              <el-form-item label="教师类型" prop="type" style="width: 400px">
                <el-checkbox-group v-model="type">
                  <el-checkbox label="主讲老师" name="type"></el-checkbox>
                  <el-checkbox label="助教老师" name="type"></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="头像" prop="data" style="width: 400px">
                <el-upload
                  class="avatar-uploader"
                  action="http://www.eshareedu.cn/edusystems/api/upload/add"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                >
                  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button
                  type="primary"
                  @click="
                    dialogFormVisible = false;
                    formadd('form');
                  "
                >
                  保存
                </el-button>
              </span>
            </template>
          </el-dialog>
          <el-input
            class="imput"
            placeholder="请输入查询内容"
            v-model="ruleForm.name"
            @blur="teacherslist"
            clearable
          ></el-input>
        </div>
      </div>
    </div>
    <div class="main">
      <el-dialog
        title="修改教师"
        v-model="dialogFormUpdate"
        style="display: flex"
      >
        <el-form :model="form">
          <el-form-item label="教师名称" style="width: 200px">
            <el-input
              v-model="form.name"
              style="width: 200px"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" style="width: 200px">
            <el-input
              v-model="form.tel"
              style="width: 200px"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="微信号" style="width: 200px">
            <el-input
              v-model="form.wechat"
              style="width: 200px"
              autocomplete="off"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="教师类型" prop="type" style="width: 400px">
            <el-checkbox-group v-model="type">
              <el-checkbox label="主讲老师" name="type"></el-checkbox>
              <el-checkbox label="助教老师" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="头像" prop="photo" style="width: 400px">
            <el-upload
              v-model="photo"
              class="avatar-uploader"
              action="http://www.eshareedu.cn/edusystems/api/upload/add"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button
              type="primary"
              @click="
                dialogFormVisible = false;
                Formupdateadd('form');
              "
            >
              修改
            </el-button>
          </span>
        </template>
      </el-dialog>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="name" label="教师名称" width="380">
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" @click="del(scope.row.id)">删除</el-button>
            <el-button
              type="text"
              @click="
                dialogFormUpdate = true;
                edit(scope.row.id);
              "
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="ruleForm.psize"
        :current-page="ruleForm.page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      ruleForm: {
        name: "",
        psize: 5,
        page: 1,        
      },
      date: "",
      imageUrl: "", //头像路径
      tableData: [],
      // // 每页显示条数
      // psize: 10,
      // // 总页数
      // page: 1,
      type: [],
      dialogFormVisible: false,
      dialogFormUpdate: false,
      form: {
        id: "",
        name: "",
        tel: "",
        wechat: "",
        photo: "",
      },
      formLabelWidth: "120px",
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  created() {
    this.teacherslist();
    // this.pageList();
  },
  methods: {
    // 列表方法
    async teacherslist() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/teachers/list?cat=0",
        { params: this.ruleForm }
      );
      console.log(res);
      this.tableData = res.data.list;
      this.total = res.data.counts;
      this.dialogFormVisible = false;
      this.dialogFormUpdate = false;
      console.log(this.tableData);
    },
    //每页显示条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.ruleForm.psize = val;
      this.teacherslist();
    },
    //当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.ruleForm.page = val;
      this.teacherslist();
    },
    // 删除方法
    async del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data } = await this.$http.get(
            "http://www.eshareedu.cn/edusystems/api/teachers/delete",
            {
              params: {
                id: id,
              },
            }
          );
          console.log(data);
          if (data.errCode !== "10000") {
            this.$message.error("删除失败");
          }
          if (data.errCode === "10000") {
            this.$message.success("删除成功!");
          }
          this.teacherslist();
        })
        .catch(() => {
          this.$message.nfo("已取消删除");
        });
    },
    //文件上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.form.photo = this.imageUrl;
      console.log(this.imageUrl);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 添加
    async formadd() {
      let add = this.type.join(",");
      this.form.type = add;
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/teachers/add",
        this.form
      );
      if ((res.errCode = "10000")) {
        this.$message.success("添加成功");
      } else {
        this.$message.error("添加失败");
      }
      this.teacherslist();
    },
    // 修改赋值
    edit(id) {
      this.form.id = id;
      this.tableData.forEach((item) => {
        console.log(item);
        if (id == item.id) {
          this.form.name = item.name;
          this.form.tel = item.tel;
          this.form.wechat = item.wechat;
          this.form.type = item.type;
          this.form.photo = item.photo;
        }
      });
    },
    // 执行修改
    async Formupdateadd() {
      let add = this.type.join(",");
      this.form.type = add;
      const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/teachers/add",
        this.form
      );
      if ((res.errCode = "10000")) {
        this.$message.success("修改成功");
      } else {
        this.$message.error("修改失败");
      }
      this.teacherslist();
    },
  },
};
</script>

<style scoped>
.student {
  min-width: 950px;
  margin-left: 2%;
}

.head {
  height: 46px;
  display: flex;
}

.head .head-left {
  width: 90px;
  line-height: 46px;
  text-align: left;
  background-color: #f1f2f6;
}

.head .head-right {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: start;
  align-items: center;
  padding-left: 20px;
}

.el-button {
  font-size: 12px;
  height: 30px;
}

.form {
  width: 365px;
  height: 30px;
  display: flex;
  align-items: center;
}

.sel,
.imput {
  margin-left: 10px;
  width: 50%;
}

.main {
  margin-top: 20px;
}

.avatar-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
